<template>
  <div class="user-avatar-dropdown">
    <Dropdown @on-click="handleDropdown">
      <Badge :dot="!!messageUnreadCount">
        <img
          v-if="!this.$store.state.user.userInfo.portrait"
          style="width: 30px; height: 30px"
          src="../../../../../public/static/image/user.png"
          alt
        />
        <img
          v-else
          style="width: 30px; height: 30px; border-radius: 20px"
          :src="this.$store.state.user.userInfo.portrait"
          alt
        />
        <span
          style="
            display: inline-block;
            margin: 0 5px 0px 8px;
            color: #fff;
            font-size: 16px;
            lineheight: 60px;
          "
          >{{ this.$store.state.user.userInfo.userName }}</span
        >
      </Badge>
      <Icon :size="18" type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list">
        <DropdownItem name="user-center-page">个人信息</DropdownItem>
        <DropdownItem name="logout">退出登录</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>
<script>
import "./user.less";
import { hasOneOf } from "@/libs/tools";
import { platformLogout } from "@/libs/login";
import { mapState } from "vuex";
export default {
  name: "User",
  props: {
    userAvatar: {
      type: String,
      default: "",
    },
    messageUnreadCount: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    ...mapState({
      tagNavList: (state) => state.app.tagNavList,
    }),
  },
  data() {
    return {
      linkUrl: "",
      avatar: this.$store.state.user.userInfo.portrait,
      hasOneOf,
    };
  },
  created() {
    if (process.env.NODE_ENV === "production") {
      this.linkUrl = "http://web.zhihuiwenlvyun.com";
    } else if (process.env.NODE_ENV === "testing") {
      this.linkUrl = "http://tweb.zhihuiwenlvyun.com";
    } else {
      this.linkUrl = "http://192.168.1.14:8080/login";
    }
  },
  methods: {
    handleDropdown(name) {
      // 标签修改  !item.query.code
      if (name === "logout") {
        let res = this.tagNavList.filter(
          (item) => item.name === this.$config.homeName && !item.query.code
        );
        this.$emit("on-close", res, "all");
        return platformLogout();
      } else if (name == "user-center-page") {
        window.open("https://jt.youlaoshan.com/#/user-info", "_target");
        return;
      }
      this.$router.push({ name });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.ivu-dropdown {
  display: flex;
  height: 100%;
}
/deep/.ivu-dropdown-rel {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
/deep/.ivu-select-dropdown {
  z-index: 999;
}
/deep/ .ivu-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.router-link-active .router-item {
  color: #2d8cf0;
}
.iconfont {
  font-size: 24px;
  color: rgb(56, 117, 168);
}
</style>
